@extends('backend.layouts.base')
@section('title', '本地模版')
@section('content')
    <style>
        .theme-list-item{
            position: relative;
            text-align:center;
            width:250px;
            height:535px;
            margin:20px;
            float:left;
            border: 1px solid #e8e8e8;
        }
        .theme-list-item-img{
            border-bottom: 1px solid #e8e8e8;
        }
        .theme-list-item-name{
            text-align: left;
            width: 92%;
            margin: 10px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head head-tab-con">
                <el-radio-group v-model="display_type">
                    @if(\YunCms::autoUpdate())
                        <el-radio-button label="1" @click.native="gotoOther(1)">模版市场</el-radio-button>
                    @endif
                    <el-radio-button label="2" @click.native="gotoOther(2)">本地模版</el-radio-button>
                </el-radio-group>
            </div>
            <div class="vue-main">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">本地模版</div>
                </div>
                <div v-loading.fullscreen.lock="loading" class="clearfix">
                    <!-- 列表 -->
                    <div v-for="(item,index) in list">
                        <div class="theme-list-item">
                            <img :src="item.thumb" class="theme-list-item-img" style="width:248px;height:450px;" alt="">
                            <div class="theme-list-item-name" :title="item.title">【[[item.type_desc]]】[[item.title]]</div>
                            <div class="theme-list-item-opt">
                                <el-button type="primary" size="small" @click="usedShow(item)">使用</el-button>
                            </div>
                        </div>
                    </div>
                    <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-if="page_total != 0">
                        <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="page_total"
                                       :page-size="page_size" :current-page="current_page"></el-pagination>
                    </el-col>
                    <el-col :span="24" align="center" migra style="padding:15px 5% 15px 0" v-if="page_total == 0">
                        暂无数据！
                    </el-col>
                </div>
            </div>
            <el-dialog title="使用模版"
                    :visible.sync="use_theme_show"
                    width="40%"
                    center
            >
                <el-form
                        ref="used_form"
                        :rules="rules"
                        :model="used_form"
                        label-width="100px"
                >
                    <el-form-item label="备注名称" prop="name">
                        <el-input
                                v-model="used_form.name"
                                placeholder=""
                                style="width:70%;"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button  @click="use_theme_show = false">取 消</el-button>
                    <el-button type="primary" @click="save()" :disabled="saving">保存</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'settingSite',
            data() {
                return{
                    display_type:2,
                    dialog_loading:false,
                    table_loading:false,
                    loading:false,
                    list:[],
                    used_form:{
                        theme:'',
                        name:''
                    },
                    use_theme_show:false,
                    saving:false,
                    page:'',
                    //分页
                    page_total:0,
                    current_page:1,
                    page_size:10,
                    rules:{},
                }
            },
            created() {
            },
            mounted() {
                this.getData({});
            },
            methods: {
                getData(search) {
                    var that = this;
                    that.loading = true;
                    let json = search;
                    that.$http.post("{!! absolute_admin_url('theme.market.getLocalList') !!}",{search:json}).then(response => {
                        console.log(response);
                        if(response.data.result==1){
                            that.page_total = response.data.data.total;
                            that.page_size = response.data.data.per_page;
                            that.current_page = response.data.data.current_page;
                            that.list = response.data.data.data;
                        }
                        else{
                            that.$message.error(response.data.msg);
                        }
                       //console.log(that.goods_list);
                        that.loading = false;
                    }),function(res){
                        console.log(res);
                        that.loading = false;
                    };
                },
                search(val) {
                    this.getData({
                        page:val
                    })
                },
                currentChange(page) {
                    this.getData(page);
                },
                usedShow(row){
                    this.use_theme_show = true;
                    this.used_form.theme = row.theme;
                    this.used_form.name = '';
                },
                save() {
                    if(this.saving){
                        return;
                    }
                    let json = {
                        theme:this.used_form.theme,
                        name:this.used_form.name
                    }
                    if(!this.used_form.name) {
                        this.$message.error("请输入名称");
                        return;
                    }
                    this.saving = true;
                    let loading = this.$loading({target:document.querySelector("#cancel-send"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('theme.theme.usedLocal') !!}',{params:json}).then(function (response) {
                        if (response.data.result) {
                            //todo 跳转到编辑页
                            //this.$message({type: 'success',message: response.data.msg});
                            window.location.href = `{!! absolute_admin_url('theme.theme.index') !!}`;
                        }
                        else{
                            this.$message({type: 'error',message: response.data.msg});
                        }
                        loading.close();
                        this.use_theme_show = false;
                        setTimeout(function () {
                            this.saving = false;
                        },500)

                    },function (response) {
                        this.$message({type: 'error',message: response.data.msg});
                        loading.close();
                        this.use_theme_show = false;
                        this.saving = false;
                    })
                },
                gotoOther(type) {
                    let url = ""
                    if(type==1) {
                        url = '{!! absolute_admin_url('theme.market.index') !!}'
                    }else if(type==2) {
                        url = '{!! absolute_admin_url('theme.market.local') !!}'
                    }
                    if(url) {
                        window.location.href=url
                    }
                },
            },
        })

    </script>
@endsection
